<template>
  <div id="app">
    <span>全选:</span>
      <input type="checkbox" v-model="istrue"/>
      <button @click="turndown">反选</button>
    <ul>
      <li v-for="(obj,index) in list" :key="index">
        <input type="checkbox" v-model="obj.flag"/>
        <span>名字:{{obj.name}}</span>
      </li>


    </ul>

    {{msg}}
  </div>
</template>

<script>
//可以通过计算属性的set收到一个信息的同时给多个data赋值

export default {
  computed:{
    istrue:{
      set(val){

        this.list.forEach(function (obj) {

            obj.flag=val


        })

      },
      get(){
        var flag=true;

        this.list.forEach(function (obj) {
          if (!obj.flag){
            flag=false
          }

        })
        return flag
      }
    },
    aaa:{
      set(val){
        this.msg=val
      },
      get(){
        return this.msg
      }
    }
  },
  methods: {
    turndown(){
      this.list.forEach(function (obj) {
        obj.flag=!obj.flag

      })
    }
  },
  data() {
    return {
      msg:'wqedasf',
      list: [
        { name:"猪八戒",  flag:false},
        { name: "裤子", flag:false},
        { name: "鞋", flag:false},
        {  name: "头发", flag:false}
      ],
    };
  },
  //局部过滤器
  filters:{

  }

};
</script>

<style >
.red{
  color: red;
}
</style>